<template>
  <div class="details">
    <el-breadcrumb class="elbreadcrumb" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name: 'PledgeFinancing' }">专利列表</el-breadcrumb-item>
      <el-breadcrumb-item class="bread-title">{{title}}</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  -->
    <el-card :body-style="{'padding-top': '0'}" class="elcard overview-info">
      <el-tabs v-model="activeName" @tab-click="handleClick" style="width:100%;">
        <el-tab-pane label="专利公开详情" name="1">
          <Publicly/>
        </el-tab-pane>
        <!-- <el-tab-pane label="法律信息" name="2">
          <Legal/>
        </el-tab-pane>
        <el-tab-pane label="同族专利" name="3">
          <Families/>
        </el-tab-pane>
        <el-tab-pane label="相关专利" name="4">
          <Related/>
        </el-tab-pane>
        <el-tab-pane label="引证专利" name="5"></el-tab-pane> -->
        
        <!-- <el-tab-pane label="审查信息" name="7"></el-tab-pane>
        <el-tab-pane label="发文信息" name="8"></el-tab-pane> -->
        <el-tab-pane label="专利评估" name="6" style="width:100%;">
          <div v-if="assessShow">
            <patent-assess style="width:100%;"></patent-assess>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import Publicly from './patentDetail/Publicly/index'
import Legal from './patentDetail/Legal'
import Families from './patentDetail/Families'
import Related from './patentDetail/Related/index'
import PatentAssess from './patentDetail/patentAssess' // 专利评估
export default {
  components: {
    Publicly,
    Legal,
    Families,
    Related,
    PatentAssess
  },
  data() {
    return {
      title: this.$route.query.title,
      pn: this.$route.query.pn,
      activeName: '1',
      assessShow:false
    }
  },
  mounted(){
  
  },
  methods: {
    handleClick(val) {
     if(val.name === '6'){
        this.assessShow = true
        this.$router.push({query:{
          title:this.title,
          pn: this.pn,
          active: this.activeName
        }},onComplete => { }, onAbort => { })
      }
    }
  },
  watch: {
    activeName() {
      this.$router.push({
        name: this.$route.name,
        query: {
          title:this.title,
          pn: this.pn,
          active: this.activeName,
        }
      }, onComplete => { }, onAbort => { })
    }
  },
  beforeMount() {
    if (this.$route.query.active) {
      let active = String(this.$route.query.active)
      if(active == '6'){
        this.activeName = '6'
        this.assessShow = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.elbreadcrumb {
  margin-top: 10px;
  margin-bottom: 26px;
}
.elcard {
  position: relative;
  flex: .5;
  text-align: left !important;
  .tit {
    font-size: 14px;
    font-weight: bold;
    i {
      color: #504da6;
    }
  }
}
</style>